.RecommendCom{
    .carousel{
        height: 200px;
        .carouselImg{
            height: 200px;
            border-radius: 5px;
        }
    }
    .RecommendSongSheet{
        margin-top:30px;
        .title{
            span{
                font-weight: 700;
                font-size: 20px;
                cursor: pointer;
            }
            i{
                cursor: pointer;
                margin-left:5px;
            }
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                position: relative;
                width: 19%;
                height: 250px;
                margin-top:20px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 80%;
                    border-radius: 5px;
                }
                .playCount{
                    position: absolute;
                    top:5px;
                    right:5px;
                    color:#fff;
                    font-size: 12px;
                    i{
                        font-size: 12px;
                    }
                }
                .bfBth{
                    display: none;
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    bottom:60px;
                    right:5px;
                    color:red;
                    border-radius: 50%;
                    background-color: #fff;
                    transition: all 0.5;
                    i{
                        position: relative;
                        top:4px;
                        left:8px;
                    }
                }
                .bfBthAvtive{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    bottom:60px;
                    right:5px;
                    color:red;
                    border-radius: 50%;
                    background-color: #fff;
                    transition: all 0.5;
                    i{
                        position: relative;
                        top:4px;
                        left:8px;
                    }
                }
                .personaName{
                    font-size: 14px;
                }
            }
        }
    }
    .privatecontent{
        ul{
            li{
                width: 32%;
            }
        }
    }
    .personalized{
        ul{
            li{
                width: 24%;
                height: 200px;
                .nameTwo{
                    font-size: 12px;
                    color:#999;
                }
                .bfBthAvtive{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    bottom:45px;
                    right:5px;
                    color:red;
                    border-radius: 50%;
                    background-color: #fff;
                    transition: all 0.5;
                    i{
                        position: relative;
                        top:4px;
                        left:8px;
                    }
                }
            }
        }
    }
    .djPersonalizeRecommend{
        height: 350px;
        ul{
            li{
                width: 16%;
                height: 210px;
                .bfBthAvtive{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    bottom:48px;
                    right:5px;
                    color:red;
                    border-radius: 50%;
                    background-color: #fff;
                    transition: all 0.5;
                    i{
                        position: relative;
                        top:4px;
                        left:8px;
                    }
                }
            }
        }
    }
}